<!-- model的公共组件：增删改查的弹窗子组件，支持的表单格式有 新增、编辑、查看 -->
<template>
  <Modal
    v-model="drawer.show"
    :width="width"
    :mask-closable="false"
    :styles="styles"
  >
    <span slot="header" :style="titleStyle">{{ lang.new }}</span>
    <div slot="footer">
      <Button  @click="drawer.show = false">{{ $t(`global.cancel`) }}</Button>
      <Button
        type="primary"
        class="ivu-ml"
        @click="ok"
        >{{ $t(`global.save`) }}</Button
      >
    </div>
    <div v-if="drawer.show && classObject.record" :style="bodyStyle">
      <Form
        ref="_frm"
        :model="classObject.record"
        :label-width="labelWidth"
        :label-position="labelPosition"
      >
        <!-- 基本字段 type className name comments -->
        <Row :gutter="32">
          <Col v-for="item in fields" :span="item.span || 12" :key="item.key">
            <FormItem :prop="item.key" :label="item.title" :rules="item.rules" v-if="item.key !=='comments'">
              <cfgCell
                :config="{
                  ...item.config,
                  options: item.key==='className' && isInstance ? classNameList : item.config.options 
                }"
                v-model="classObject.record[item.key]"
                @change="change(item.key, $event)"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  </Modal>
</template>

<script>
import cfgCell from '../cfg-cell.vue'
export default {
  name: "cfgEditModal",
  components: {cfgCell},
  data() {
    return {
      general: {
        status: { type: 'Boolean', defaultValue: false },
        name: { type: 'string', defaultValue: "" },
      },
      propInfo: {},
      values: {},
      modelFieldList: []
    }
  },
  methods: {
    change(key, value) {
      if (this.isInstance && key === 'type') {
        this.classObject.record.className = ''
      }
    },
    // 提交添加或修改数据
    ok() {
      this.$refs._frm.validate(valid => {
        if (valid) {
          console.log("🚀 ~ file: cfgCrud-AddModal.vue:73 ~ ok ~ valid:", valid, this.classObject)
          this.$emit('submit')
          this.$refs._frm.resetFields()
          this.drawer.show = false
        }
      });
    },
  },
  props: {
    drawer: {
      default: () => {
        return {
          status: 'edit', // new edit read
          show: false,
        };
      }
    },
    fields: {
      default() {
        return []
      }
    },
    modelList: {
      default() {
        return []
      }
    },
    classObject: {
      default() {
        return null
      }
    },
    collectionObject: {
      default() {
        return null
      }
    },
    width: {
      default: () => {
        return 90;
      }
    },
    titleStyle: {
      default: () => {
        return {}
      }
    },
    hasFeatures: {
      default() {
        return false
      }
    },
    isInstance: {        // 当时是实例管理页面：包含模板的字段列表
      default: false
    },
    additionForm: {
      default() {
        return ''
      }
    },
    styles: {
      default() {
        return {top: '50px', maxWidth: '1200px'}
      }
    },
    bodyStyle: {
      default() {
        return {}
      }
    },
    labelWidth: {
      default() {
        return 120
      }
    },
    labelPosition: {
      default() {
        return 'right'
      }
    },
  },
  watch: {
    'drawer.show'(val) {
      if (val) {
      }
    }
  },
  computed: {
    classNameList() {
      if(this.modelList) {
        let curList = this.classObject.record.type ? this.modelList.filter(item => item.type === this.classObject.record.type) : []
        return curList.map(item => {
          return {label: item.className, value: item.className, nodeId: item.nodeId}
        })
      } else {
        return []
      }
    },
    lang() {
      return {
        "en-US": {
          edit: 'edit',
          new: 'new',
          read: 'read',
          action: 'action',
          submit: 'submit',
          type: 'type',
          typePlaceholder: 'Please select type',
          className: 'className',
          classNamePlaceholder: 'Please enter class name',
          version: 'version',
          versionPlaceholder: 'Please enter version',
          published: 'published',
          comments: 'comments',
          commentsPlaceholder: 'Please enter comments',
          modelProperties: 'Model Attribute Configuration',
          typeRuleMsg: 'Please select property type',
          classNameRuleMsg: 'Please enter class name'
        },
        "zh-CN": {
          edit: '编辑',
          new: '添加',
          read: '查看',
          action: '操作',
          submit: '提交',
          type: '所属类型',
          typePlaceholder: '请选择所属类型',
          className: '模型类名',
          classNamePlaceholder: '请输入模型类名',
          version: '版本号',
          versionPlaceholder: '请输入版本号',
          published: '是否发布',
          comments: '说明',
          commentsPlaceholder: '请输入描述信息',
          modelProperties: '模型属性配置',
          typeRuleMsg: '请选择所属类型',
          classNameRuleMsg: '请输入模型类名'
        },
      }[this.G_Locale]
    },
  },
}
</script>
